<template>
  <div>
    <div>
      <mu-appbar color="primary" :z-depth="0">
        <div slot="left" class="padl10">
          <div class="flrc">
            <div class="fwb fs30">EZ</div>
            <div class="padl5">
              <div class="flex1 fs10">ADMIN PLATFORM</div>
              <div class="fs6 op7">构建模块化共享化后台生态社区</div>
            </div>
          </div>
        </div>
        <div class="flex-r">
          <div class="flex1">
            <mu-menu placement="bottom-start" open-on-hover v-for="(top,index) in tops" :key="index">

              <mu-button flat v-if="top.url === ''">
                <mu-icon :value="top.icon" size="18" v-if="top.icon !== ''"></mu-icon>
                <mu-icon value="folder_open" size="18" v-else></mu-icon>
                <span class="pad3">{{ top.name }}</span>
                <mu-icon value="arrow_drop_down"></mu-icon>
              </mu-button>
              <mu-button flat v-else :to="`/micro_${top.model.name}/#${top.url}`">
                <mu-icon value="folder_open" size="18"></mu-icon>
                <span class="pad3">{{ top.name }}</span>
              </mu-button>
              <mu-list dense slot="content" v-if="top.url === ''">
                <mu-list-item button :to="`/micro_${entry.model.name}/#${entry.url}`" v-for="(entry,idx) in top.children"
                              :key="idx">
                  <div class="w100 flrc c11 op7">
                    <mu-icon :value="top.icon" size="18" v-if="entry.icon !== ''"></mu-icon>
                    <mu-icon value="folder_open" size="18" v-else></mu-icon>
                    <div class="flex1 padl5">{{ entry.name }}</div>
                  </div>
                </mu-list-item>
              </mu-list>
            </mu-menu>
          </div>
          <div class="flcc">
            <mu-avatar color="success" :size="36" v-if="!user.pic">A</mu-avatar>
            <mu-avatar color="success" :size="36" v-if="!!user.pic && user.pic.url !== ''">
              <img style="width: 48px;height: 48px;" :src="$http.root() + user.pic.url" alt="">
            </mu-avatar>
          </div>
        </div>

        <mu-menu placement="bottom" slot="right" open-on-hover>
          <mu-button flat>
            <mu-icon value="more_vert"></mu-icon>
          </mu-button>
          <mu-list slot="content">
            <mu-list-item button @click="goto('/login')">
              <mu-list-item-title>注销</mu-list-item-title>
              <mu-list-item-action>
                <mu-icon value="power_settings_new"></mu-icon>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item button @click="password.show = true">
              <mu-list-item-title>修改密码</mu-list-item-title>
              <mu-list-item-action>
                <mu-icon value="lock_open"></mu-icon>
              </mu-list-item-action>
            </mu-list-item>
          </mu-list>
        </mu-menu>
        <mu-button @click="fullScreen" icon slot="right">
<!--          全屏按钮-->
          <mu-icon value="fullscreen"></mu-icon>
        </mu-button>
      </mu-appbar>
    </div>
    <div class="bc01">
<!--      {{tops}}-->
    </div>

    <div id="microContainer">

    </div>
    <mu-dialog title="密码修改" width="600" :open.sync="password.show" :overlay-close="false">
      <div>
        <mu-text-field v-model="password.old" label="原密码" type="password" full-width></mu-text-field>
      </div>
      <div>
        <mu-text-field v-model="password.new" label="新密码" type="password" full-width></mu-text-field>
      </div>
      <mu-button slot="actions" flat color="primary" @click="password.show = false">取消</mu-button>
      <mu-button slot="actions" flat color="primary" @click="changePassword">修改</mu-button>
    </mu-dialog>

  </div>
</template>

<script>
import micros from "@/pages/micros";
import {registerMicroApps, start} from 'qiankun';

export default {
  name: "v1-index",
  data() {
    return {
      user: {},
      models: [],//废弃
      tops: [],
      microApps: [],
      password: {
        show: false,
        old: "",
        new: "",
      }
    }
  },
  created() {
    this.user = this.$ezstore.auth.getUser()
  },
  mounted() {
    this.getModels()
    this.getTops()
  },
  methods: {
    fullScreen() {
      //切换网页为全屏模式
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    },

    getModels() {
      let models = this.$ezstore.auth.getModels()
      if (models.length === 0) {
        this.$toast.error("系统模块权限故障，请注销后重试，或者联系管理员")
      } else {
        this.microApps = []
        if (process.env.NODE_ENV === "development") {
          // this.models = models
          this.createMicro(models)
          registerMicroApps(micros.dev.concat(this.microApps));
        }
        if (process.env.NODE_ENV === "production") {
          // this.models = models
          this.createMicro(models)
          registerMicroApps(micros.prod.concat(this.microApps));
        }
        start()
      }

    },
    getTops() {
      let tops = this.$ezstore.auth.getTops()
      if (tops.length === 0) {
        this.$toast.error("未取得顶部菜单权限，请联系管理员")
      } else {
        this.tops = tops
      }

    },
    createMicro(models) {
      for (let md of models) {
        if (md.entry !== '') {
          this.microApps.push({
            name: md.name, // app name registered
            entry: md.entry,//entry需要跟子服务打包目录相同
            container: '#microContainer',
            activeRule: `/admin/micro_${md.name}`,
          })
        }
      }
    },
    changePassword() {
      this.$http.post("/core/admin/password", this.password, res => {
        if (res.code === 2001) {
          this.$toast.success(res.message)
          this.password.show = false
          this.password.old = ""
          this.password.new = ""
        }
      })
    }
  }
}
</script>

<style scoped>

</style>